/**
 * 待发货订单列表
 */
import React, { memo } from 'react';
import { Row, Col, Table, Tooltip, Card, Icon } from 'antd';
import { FormattedMessage } from 'umi/locale';
import Trend from '@/components/Trend';
import numeral from 'numeral';
import styles from './Analysis.less';
import NumberInfo from '@/components/NumberInfo';
import { MiniArea } from '@/components/Charts';
import Ellipsis from '../../components/ourslook/Ellipsis';

const columns = [
  {
    title: '订单号',
    dataIndex: 'orderNo',
    key: 'orderNo',
  },
  // {
  //   title: '用户支付金额',
  //   dataIndex: 'priceFinal',
  //   key: 'priceFinal',
  // },
  // {
  //   title: '下单时间',
  //   dataIndex: 'timePlaceOrder',
  //   key: 'timePlaceOrder',
  // },
  {
    title: '用户昵称',
    dataIndex: 'username',
    key: 'username',
    render: value => (
      <Ellipsis length={10} tooltip>
        {value}
      </Ellipsis>
    ),
  },
  {
    title: '用户手机号',
    dataIndex: 'mobile',
    key: 'mobile',
  },
];

const TopSearch = memo(({ loading, visitData2, searchData, dropdownGroup }) => (
  <Card
    loading={loading}
    bordered={false}
    title="待发货订单列表"
    // extra={dropdownGroup}
    style={{ marginTop: 24, height: 480 }}
  >
    {/*<Row gutter={68}>*/}
    {/*  <Col sm={12} xs={24} style={{ marginBottom: 24 }}>*/}
    {/*    <NumberInfo*/}
    {/*      subTitle={*/}
    {/*        <span>*/}
    {/*          <FormattedMessage id="app.analysis.search-users" defaultMessage="search users" />*/}
    {/*          <Tooltip*/}
    {/*            title={<FormattedMessage id="app.analysis.introduce" defaultMessage="introduce" />}*/}
    {/*          >*/}
    {/*            <Icon style={{ marginLeft: 8 }} type="info-circle-o" />*/}
    {/*          </Tooltip>*/}
    {/*        </span>*/}
    {/*      }*/}
    {/*      gap={8}*/}
    {/*      total={numeral(12321).format('0,0')}*/}
    {/*      status="up"*/}
    {/*      subTotal={17.1}*/}
    {/*    />*/}
    {/*    <MiniArea line height={45} data={visitData2} />*/}
    {/*  </Col>*/}
    {/*  <Col sm={12} xs={24} style={{ marginBottom: 24 }}>*/}
    {/*    <NumberInfo*/}
    {/*      subTitle={*/}
    {/*        <span>*/}
    {/*          <FormattedMessage*/}
    {/*            id="app.analysis.per-capita-search"*/}
    {/*            defaultMessage="Per Capita Search"*/}
    {/*          />*/}
    {/*          <Tooltip*/}
    {/*            title={<FormattedMessage id="app.analysis.introduce" defaultMessage="introduce" />}*/}
    {/*          >*/}
    {/*            <Icon style={{ marginLeft: 8 }} type="info-circle-o" />*/}
    {/*          </Tooltip>*/}
    {/*        </span>*/}
    {/*      }*/}
    {/*      total={2.7}*/}
    {/*      status="down"*/}
    {/*      subTotal={26.2}*/}
    {/*      gap={8}*/}
    {/*    />*/}
    {/*    <MiniArea line height={45} data={visitData2} />*/}
    {/*  </Col>*/}
    {/*</Row>*/}
    <Table
      rowKey={record => record.index}
      size="small"
      columns={columns}
      dataSource={searchData}
      pagination={{
        style: { marginBottom: 0 },
        pageSize: 5,
      }}
    />
  </Card>
));

export default TopSearch;
